<template>
  <div class="container">
    <NuxtLink to="/about"> 跳转关于 </NuxtLink>
    <NuxtLink to="/systems/users"> 跳转用户 </NuxtLink>
    <button @click="go('systems-menus')">跳转菜单</button>
    <div class="bg">
      {{ counter }}
    </div>
    <div class="btn-box">
      <button @click="add">增加</button>
      <el-button type="primary"> 新增 </el-button>
      <ul>
        <li v-for="item in list" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex';
import { getMenuList } from '../api/home';
export default {
  middleware: 'middleware-pages-test',
  validate(context) {
    console.log('%c5启动validate', 'color:blue');
    return true;
  },
  asyncData(context) {
    console.log('baseURL', context.env.baseURL);
    console.log(console.log('%c6启动asyncData', 'color:orange'));
    context.app.contextFunction('asyncData!'); // 这是在context中注入的
    context.app.$injectedFunction('asyncData!');
    // const res = await getMenuList();
    // console.log(res);
    return {
      // list: res
    };
  },
  data() {
    return {
      age: 20
    };
  },
  fetch({ store, route, params, query }) {
    console.log('%c7启动fetch', 'color:maroon');
    getMenuList().then((res) => {
      store.dispatch('login/add_list', res);
    });
  },
  computed: {
    ...mapGetters('login', ['counter']),
    ...mapState('login', ['list'])
  },
  mounted() {
    this.$injectedFunction('mounted');
    // const res = await getMenuList();
    // this.$store.dispatch('login/add_list', res);
  },
  methods: {
    ...mapActions('login', ['add_counter']),
    getList() {
      getMenuList()
        .then((res) => {
          this.list = res.list;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    go(url) {
      this.$router.push({ name: url });
    },
    add() {
      // this.$store.dispatch("login/add_counter");
      this.add_counter();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 100px);
}
.bg {
  border: 1px solid $red;
  height: 500px;
  background-image: url('@/assets/img/test.png');
  background-repeat: no-repeat;
  background-position: center;
}
.font-color {
  font-weight: 800;
}

.btn-box {
  @include clearfix;
  margin-right: 40px;
  button {
    @include fr;
    @extend .font-color; /* 继承 指定选择器样式 */
    margin-#{$left}: 30px; /* 变量 */
    margin-#{$t}: 3 * 10px; /* 计算 */
    @include font(30px);
  }
}
</style>
